<script setup lang="ts">
import {markRaw, onMounted, ref} from "vue"
import type {EChartsOption, EChartsType} from "echarts"
import * as echarts from "echarts";
import {useGetSunburstDataApi} from "@/api"
import type {Sunburst} from "@/interface"

const sunburst = ref()
const option = ref<EChartsOption>()
const myChart = ref<EChartsType>()
const sunburstData = ref<Sunburst>({
  data: []
})
const init = async () => {
  const {data: res} = await useGetSunburstDataApi()
  sunburstData.value = res
  myChart.value = markRaw(echarts.init(sunburst.value));
  draw();
}
const draw = () => {
  option.value = {
    title: [
      {
        left: 'center',
        text: '学历与工作经验旭日图',
        textStyle:{
          color:'#000000'
        }
      }
    ],
    tooltip:{},
    series: {
      type: 'sunburst',
      emphasis: {
          focus: 'ancestor'
      },
      data: sunburstData.value.data,
      radius: [0, '80%'],
      label: {
        rotate: 'radial'
      }
    }
  }
  myChart.value.setOption(option.value, {notMerge: true});
}
onMounted(() => {
  init()
})
</script>

<template>
  <div ref="sunburst" class="sunburst">
  </div>
</template>

<style scoped>
.sunburst {
  width: 100%;
  height: 100%;
}
</style>